<template>
	
	<view class="wrap">
		<view class="logo">
			<image src="../../static/applogo.png" mode="scaleToFill"></image>
		</view>
		<view class="login-box">
			<view class="zuoshangjiao"></view>
			<view class="zuoxiajiao"></view>
			<view class="youshangjiao"></view>
			<view class="youxiajiao"></view>
			<view class="title">用户登录</view>
		    <view class="user-box">
		      <input @focus="mobilefocus" @blur="mobileblur" type="text" v-model="mobile">
		      <view  :class="{hasval:mobile,hasfocus:hasfocus}" class="label">账号</view>
		    </view>
		    <view class="user-box">
		      <input v-model="pwd" @focus="pwdfocus2" @blur="pwdblur" type="password">
		      <view class="label" :class="{hasval:pwd,pwdfocus:pwdfocus}">密码</view>
		    </view>
			<view class="code-wrap">
				<view class="label- user-box">
					
					<input  placeholder-style="color:#fff" @focus="codefocus2" @blur="codeblur" v-model="code" type="text" placeholder="" />
					<view class="label" :class="{hasval:code,codefocus:codefocus}">验证码</view>
				</view>
				<view class="right" @click="resetcode">
					<yanzhengma ref="code"></yanzhengma> 
				</view>
			</view>
			<view class="tip-btn">
				<view class="register" @click="enterpage('../register/index')">用户注册！</view>
				<view class="forget" @click="enterpage('../forget/index')">忘记密码？</view>
			</view>
			<view class="sub-btn" @click="loginClick">
				登录
			</view>
		</view>
		
	</view>
</template>

<script>
	import yanzhengma from "@/components/yanzhengma/yanzhengma.vue"
	export default {
		components:{
			yanzhengma
		},
		data() {
			return {
				codefocus:false,
				pwdfocus:false,
				hasfocus:false,
				code:'',
				mobile: '',
				pwd:''
			}
		},
		onLoad() {
			
		},
		methods: {
			codeblur(){
				this.codefocus=false
			},
			codefocus2(){
				
				this.codefocus=true
			},
			pwdblur(){
				this.pwdfocus=false
			},
			pwdfocus2(){
				this.pwdfocus=true
			},
			mobileblur(){
				this.hasfocus=false
			},
			mobilefocus(){
				this.hasfocus=true
			},
			resetcode(){
				this.$refs.code.refresh();
			},
			loginClick(){
				let code=uni.getStorageSync('imgcode');
				
				let that=this
				if(this.mobile==''||this.pwd==''){
					uni.showToast({
					    title: '账号密码不能为空',
					    duration:4000,
						icon:'none'
					});
					return
				}
				if(this.code.toUpperCase()!=code.toUpperCase()){
					uni.showToast({
					    title: '验证码输入错误',
					   duration:4000,
						icon:'none'
					});
					return
				}
				that.apipost('/api/auth/login',{
					mobile:that.mobile,
					pwd:that.pwd
				},true).then(res => {
					if(res.Code==10200){
						uni.setStorageSync("auth_token",res.Data)
						uni.setStorageSync("mobile",that.mobile)
						uni.switchTab({
						    url: '/pages/index/index'
						});
					}
					
				}).catch(err=>{
					console.log(err)
				});
			},
			switchpage(path){
				if(path){
					uni.switchTab({
					    url: '/pages/index/index'
					});
				}else{
					uni.showToast({
					    title: '暂未开放',
					    duration:4000,
						icon:'none'
					});
				}
			},
			enterpage(path){
				
				if(path){
					
					uni.navigateTo({
					    url: path
					});
				}else{
					uni.showToast({
					    title: '暂未开放',
					    duration:4000,
						icon:'none'
					});
				}
			}
		}
	}
</script>

<style>
.code-wrap{
		padding-bottom:4rpx;
		display:flex;
		margin-top:32rpx;
		align-items: center;
	}
	.code-wrap .label-{
		background-size: auto 60%;
		height:46rpx;
		margin-right:6rpx;
	}
	.code-wrap input{
		color:#fff;
		height:100%;
		/* box-sizing: border-box; */
	}
	.code-wrap .right{
		background:#fff;
	}
	.wrap{
		height:100%;
		overflow: hidden;
		background:url(../../static/forgetbg.jpg) no-repeat;
		background-size:100% 100%;
	}
	
	.zuoshangjiao{
		position:absolute;
		left:0;
		top:0;
		height:38rpx;
		width:38rpx;
		background: url(../../static/zuoshangjiao.png) no-repeat;
		background-size:100% 100%;
	}
	.zuoxiajiao{
		position:absolute;
		left:0;
		bottom:0;
		height:38rpx;
		width:38rpx;
		background: url(../../static/zuoxiajiao.png) no-repeat;
		background-size:100% 100%;
	}
	.youshangjiao{
		position:absolute;
		right:0;
		top:0;
		height:38rpx;
		width:38rpx;
		background: url(../../static/youshangjiao.png) no-repeat;
		background-size:100% 100%;
	}
	.youxiajiao{
		position:absolute;
		right:0;
		bottom:0;
		height:38rpx;
		width:38rpx;
		background: url(../../static/youxiajiao.png) no-repeat;
		background-size:100% 100%;
	}
	.sub-btn{
		height:66rpx;
		color:#fff;
		display:flex;
		justify-content: center;
		align-items: center;
		border-radius:8rpx;
		background: url(../../static/loginbtn.png) repeat-x;
		background-size:100% 100%;
		margin-bottom:70rpx;
	}
	.tip-btn{
		display:flex;
		justify-content: space-between;
		color:#fff;
		font-size:24rpx;
		margin-top:40rpx;
		padding:28rpx 0 42rpx 0;
		
	}
	.login-box .title{
		color:#fff;
		padding:48rpx 0 44rpx 0;
		text-align:center;
		font-size:50rpx;
	}
	.logo{
		width:280rpx;
		height:280rpx;
		margin:0 auto;
		margin-top:268rpx;
	}
	.login-box {
	  padding:0 44rpx 6rpx 44rpx;
	  box-sizing: border-box;
	  width:560rpx;
	  position:relative;
	  background:rgba(31,99,196,1);
	  margin:0 auto;
	}
	.login-box .user-box {
	  position: relative;
	}
	.login-box .user-box input {
	  width: 100%;
	  height:40rpx;
	  padding: 5px 0;
	  color: #fff;
	  margin-bottom: 30rpx;
	  border: none;
	  border-bottom: 1px solid #fff;
	  outline: none;
	  background: transparent;
	}
	.login-box .user-box .label {
	  position: absolute;
	  top:0;
	  left: 0;
	  /* padding: 10px 0; */
	  color: #fff;
	  pointer-events: none;
	  font-size:32rpx;
	  transition: .5s;
	}
	.login-box .user-box .hasfocus,
	.login-box .user-box .pwdfocus,
	.login-box .user-box .codefocus,
	.login-box .user-box .hasval {
	  top: -30rpx;
	  left: 0;
	  color: #fff;
	  font-size: 20rpx;
	}
	@keyframes btn-anim1 {
	  0% {
		left: -100%;
	  }
	  50%,100% {
		left: 100%;
	  }
	}
	@keyframes btn-anim2 {
	  0% {
		top: -100%;
	  }
	  50%,100% {
		top: 100%;
	  }
	}
	@keyframes btn-anim3 {
	  0% {
		right: -100%;
	  }
	  50%,100% {
		right: 100%;
	  }
	}
	@keyframes btn-anim4 {
	  0% {
		bottom: -100%;
	  }
	  50%,100% {
		bottom: 100%;
	  }
	}
</style>
